<template>
    <div>
        <el-carousel :interval="10000" arrow="never" height="520px" >
          <el-carousel-item v-for="item in 3" :key="item">
            <div class="box_content" @click="handle">
              <div class="title">
                <el-row :gutter="gutterNum">
                  <el-col :span="18">
                    <img class="title_logo" :src="titlelogo" alt="" />
                    <span class="title_title">市场价格智能预测</span>
                    <span class="title_desc">（预测数据来自能源经济研究院）</span>
                  </el-col>
                  <el-col :span="6">
                    <div class="title_rightimg">
                      <el-date-picker
                        v-model="monthVal"
                        type="month"
                        prefix-icon="el-icon-arrow-down"
                        :clearable="false"
                        placeholder="选择月"
                      >
                      </el-date-picker>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div class="echarts_title">
                <el-row :gutter="gutterNum">
                  <el-col :span="12">
                    <span class="left_desc">原油(美元/桶)</span>
                  </el-col>
                  <el-col :span="12">
                    <el-row :gutter="gutterNum">
                      <el-col :span="12">
                          <div style="border-right:1px solid #dedede">
                              <span class="right_desc"
                          >同比增长 <span class="right_num">4.3%</span>
                        </span>
                          </div>
  
                      </el-col>
                      <el-col :span="12">
                        <span class="right_desc"
                          >环比增长 <span class="right_num">8%</span>
                        </span>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </div>
              <div class="bgcolor01">
                <div class="echarts_content">
                  <baseEcharts :options="znjkOptions" />
                </div>
  
                <div class="foot_content">
                  <el-row :gutter="24">
                    <el-col :span="12">
                      <div class="flex_item">
                        <el-row :gutter="gutterNum">
                          <el-col :span="11">
                            <div
                              class="textcenter padd4"
                              style="border-right: 1px solid #dedede"
                            >
                              <div class="content_num">$82.46</div>
                              <div class="content_desc">BRENT实时成交</div>
                            </div>
                          </el-col>
                          <el-col :span="13">
                            <el-row :gutter="gutterNum">
                              <el-col :span="12">
                                <div class="padd10">
                                  <span class="content_arrow">
                                    0.26 <i class="el-icon-top-right"></i>
                                  </span>
  
                                  <div class="content_desc padd4 textcenter">
                                    涨跌
                                  </div>
                                </div>
                              </el-col>
                              <el-col :span="12">
                                <div class="padd10">
                                  <span class="content_arrow">
                                    0.26 <i class="el-icon-top-right"></i>
                                  </span>
  
                                  <div class="content_desc padd4 textcenter">
                                   涨跌幅
                                  </div>
                                </div>
                              </el-col>
                            </el-row>
                          </el-col>
                        </el-row>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="flex_item">
                        <el-row :gutter="gutterNum">
                          <el-col :span="11">
                            <div
                              class="textcenter padd4"
                              style="border-right: 1px solid #dedede"
                            >
                              <div class="content_num">$82.46</div>
                              <div class="content_desc">BRENT实时成交价</div>
                            </div>
                          </el-col>
                          <el-col :span="13">
                            <el-row :gutter="gutterNum">
                              <el-col :span="12">
                                <div class="padd10">
                                  <span class="content_arrow_green">
                                    0.26 <i class="el-icon-bottom-right"></i>
                                  </span>
  
                                  <div class="content_desc padd4 textcenter">
                                    涨跌
                                  </div>
                                </div>
                              </el-col>
                              <el-col :span="12">
                                <div class="padd10">
                                  <span class="content_arrow_green">
                                    0.26 <i class="el-icon-bottom-right"></i>
                                  </span>
  
                                  <div class="content_desc padd4 textcenter">
                                    涨跌幅
                                  </div>
                                </div>
                              </el-col>
                            </el-row>
                          </el-col>
                        </el-row>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>

      <!-- <el-button @click="handle">按钮</el-button>
      <div style="height: 100vh; width: 100%; background: red"></div> -->
  
      <t-dialog
        ref="tdialog"
        :titlelogo="titlelogo"
        :title_title="title_title"
        :title_desc="title_desc"
        :monthVal="monthVal"
      >
        <scjgznjc />
      </t-dialog>
    </div>
  </template>
  
  <script>
  import tDialog from "@/components/t-dialog/index.vue";
  import scjgznjc from "@/components/t-dialog/scjgznjc.vue";
  import baseEcharts from "@/components/echart/index.vue";
  import { znjkOptions } from "./config";
  export default {
    components: {
      tDialog,
      scjgznjc,
      baseEcharts,
    },
  
    data() {
      return {
        znjkOptions,
        gutterNum: 6,
        title_title: "市场价格智能预测",
        title_desc: "（预测数据来自能源经济研究院）",
        titlelogo: require("@/assets/img/logo.png"),
        monthVal: "2024-06",
      };
    },
  
    methods: {
      handle() {
        this.$refs.tdialog.openDialog();
      },
    },
  };
  </script>
  
  <style lang="less" scoped>
  .textcenter {
    text-align: center;
  }
  .box_content {
    width: 100%;
    .title {
      border-radius: 6px;
      background: linear-gradient(to right, #d8ddff, #edf3fa);
      padding: 10px;
      .title_logo {
        height: 30px;
        width: 30px;
        vertical-align: middle;
      }
      .title_title {
        font-size: 16px;
        color: #222;
        padding-left: 4px;
        font-weight: 600;
      }
      .title_desc {
        padding-left: 4px;
        font-size: 12px;
        color: #999;
      }
      .title_rightimg {
        text-align: right;
        padding-right: 10px;
        /deep/ .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
          width: 100px;
        }
        /deep/ .el-input__prefix {
          left: auto;
          right: 5px;
          color: #000;
          font-weight: 700;
          top: -3px;
        }
  
        /deep/ .el-input--small .el-input__inner {
          height: 29px;
          line-height: 29px;
        }
  
        /deep/ .el-input--prefix .el-input__inner {
          padding-left: 15px;
          padding-right: 0;
          border-radius: 100px;
          background: #e7eaf1;
          color: #000;
          font-weight: 700;
          vertical-align: bottom;
        }
      }
    }
    .echarts_title {
      border-radius: 2px;
      padding: 8px 12px;
      background: #fff;
      .left_desc {
        color: #000;
        font-weight: 700;
      }
      .right_desc {
        color: #777;
      }
      .right_num {
        color: #e97b5b;
      }
    }
    .bgcolor01 {
      background: #dee3fc;
    }
    .echarts_content {
      width: 100%;
      padding: 0 10px;
      height: 300px;
    }
    .foot_content {
      padding: 12px;
      padding-bottom: 36px;
      .flex_item {
        background: #fff;
        border-radius: 10px;
        padding: 16px 0;
      }
    }
  }
  .padd4 {
    padding: 4px 0;
  }
  .padd10 {
    padding: 4px 0 0px;
  }
  
  .content_arrow {
    background: #fff1e9;
    color: #e97b5b;
    font-size: 14px;
    padding: 3px 5px;
    border-radius: 5px;
  }
  .content_arrow_green {
    background: #e5ffe6;
    color: #7dd04b;
    font-size: 14px;
    padding: 3px 5px;
    border-radius: 5px;
  }
  .content_desc {
    color: #888;
    font-size: 10px;
  }
  .content_num {
    font-size: 18px;
    color: #000;
    font-weight: 700;
  }
  
  ::v-deep .el-carousel__indicators--horizontal {
          position: absolute;
          bottom: 5px;
          text-align: right;
          .el-carousel__indicator--horizontal button {
              width: 8px;   
              height: 8px;
              background: #9AA5B2;
              border-radius: 50%;
              opacity: 0.5;
          }
   
          .el-carousel__indicator--horizontal.is-active button {
              width: 8px;    
              height: 8px;
              background: #69ACF0;
              opacity: 1;
              border-radius: 50%;
          }
      }
  
  
  </style>